<template>
  <div class="search-box">
    <div v-html="element()"></div>
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  props: ["doc"],
  data() {
    return {
      imgURL: "",
    };
  },
  mounted() {
    let imgAll = document.querySelectorAll(
      ".search_prolist_item .search_prolist_cover img"
    );
    for (let i = 0; i < imgAll.length; i++) {
      const element = imgAll[i];
      element.src = this.imgURL + element.getAttribute("init_src");
    }

    let priceBoxs = document.querySelectorAll(
      ".search_prolist_info .search_prolist_price em"
    );
    let price = null;
    priceBoxs.forEach((item) => {
      price = item.getAttribute("pri");
      item.innerHTML = "￥" + (price ? price : "2399.00");
    });

    let goodsItems = document.querySelectorAll(".search_prolist_item");
    goodsItems.forEach((item) => {
      item.onclick = () => {
        this.$router.replace({
          name: "goodsDetail",
          params: { skuid: item.getAttribute("skuid") },
        });
      };
    });
  },
  methods: {
    element() {
      let tarEle = this.doc.querySelector(".search_prolist");
      if (!tarEle) return;
      let html = tarEle.innerHTML;
      let src = this.doc.querySelector(
        ".search_prolist_item .search_prolist_cover img"
      ).src;
      let idx = src.match(new RegExp("(?=_)")).index;
      this.imgURL = src.substr(0, idx + 1);
      console.log(src, this.imgURL);
      return html;
    },
  },
};
</script>

<style scoped>
.search-box >>> {
  padding: 0 8px;
}
.search-box /deep/ .photo {
  width: 120px;
  height: 120px;
}
>>> .search_prolist_item {
  margin-bottom: 10px;
  box-shadow: 0 0 12px rgb(0 0 0 / 10%);
  padding: 5px 0;
  position: relative;
}
.search-box >>> .search_prolist_item_inner {
  display: grid;
  grid-template-columns: 120px 80%;
}
.search-box >>> .search_prolist_info {
  flex-direction: column;
  min-height: 120px;
  padding-bottom: 8px;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
  line-height: 1;
  justify-content: center;
}
>>> .search_prolist_title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  width: 90%;
  color: #333;
}
>>> .shop_name::after {
  content: ">";
}
>>> .shop_name {
  font-size: 12px;
  position: relative;
  display: inline-block;
  padding-right: 14px;
  line-height: 14px;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gray);
}
>>> .search_prolist_comment::before {
  content: "999";
}
>>> .search_prolist_ad {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  height: 20px;
  padding: 3px;
  border-radius: 4px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}
>>> .search_prolist_other {
  font-size: 12px;
  color: var(--gray);
}

>>> .search_prolist_shop,
>>> .search_prolist_other,
>>> .search_prolist_title {
  margin-bottom: 5px;
}

.search-box >>> .search_prolist_price em {
  font-size: 14px;
  line-height: 2;
  font-style: normal;
  color: var(--red);
}
</style>